<template>
  <div class="app-container">
    <div class="p4">
      <el-row>
        <el-col :span="3">
          <el-form-item label="桶" label-width="50">
            <el-select v-model="form.clientType" clearable placeholder="请选择桶" @change="changeBucket">
              <el-option v-for="bn in bucketList" :key="bn.name" :label="bn.name" :value="bn.name" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="21" v-if="navList != null && navList.length > 0">
          <el-form-item>
            <template #label>
              <span style="margin-left: 20px;">
                <el-icon>
                  <HomeFilled />
                </el-icon>
                位置：
              </span>
            </template>
            <el-breadcrumb v-for="item in navList">
              <span style="padding: 5px">/</span>
              <a @click="setDir(item.objectName)" style="">{{ item.name }}</a>
            </el-breadcrumb>
          </el-form-item>
        </el-col>
      </el-row>

      <el-space wrap>
        <el-button type="primary" icon="Plus" @click="uploadFile" v-auth="['system:oss:add']">上传文件</el-button>
        <el-button type="danger" icon="Delete" :disabled="multiple" @click="handleDelete"
          v-auth="['system:oss:remove']">删除</el-button>
        <el-button icon="Refresh" @click="getList" v-auth="['system:oss:remove']">刷新</el-button>

      </el-space>

      <el-table v-loading="loading" :data="fileList" @selection-change="handleSelectionChange" stripe
        highlight-current-row border class="mt4">
        <el-table-column type="selection" width="55" align="center" />
        <!--        <el-table-column label="#" align="left" prop="etag" width="300" />-->
        <el-table-column label="对象名称" align="left" prop="objectName">
          <template #default="scope">
            <a href="javascript:void(0)" @click="setDir(scope.row.objectName)" v-if="scope.row.dir == true">{{
              scope.row.objectName.substr(0, scope.row.objectName.length - 1).substr(scope.row.objectName.substr(0,
                scope.row.objectName.length - 1).lastIndexOf("/") + 1)
            }}</a>
            <el-span v-else>{{ scope.row.objectName.substr(scope.row.objectName.lastIndexOf("/") + 1) }} </el-span>
          </template>
        </el-table-column>
        <el-table-column label="是否目录" align="center" prop="dir" width="300">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.dir == true">目录</el-tag>
            <el-tag type="danger" v-else>文件</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="大小" align="center" prop="size" width="300">
          <template #default="scope">
            <span v-if="scope.row.size == null || scope.row.size === 0">
              -
            </span>
            <span v-else-if="scope.row.size != null && (scope.row.size / 1024) < 1024" style="coler: red">
              {{ (scope.row.size / 1024).toFixed(2) }} KB
            </span>
            <span v-else-if="scope.row.size != null && (scope.row.size / 1024 / 1024) < 1024" style="coler: red">
              {{ (scope.row.size / 1024 / 1024).toFixed(2) }} MB
            </span>
            <span v-else-if="scope.row.size != null && (scope.row.size / 1024 / 1024 / 1024) < 1024" style="coler: red">
              {{ (scope.row.size / 1024 / 1024 / 1024).toFixed(2) }} GB
            </span>
          </template>
        </el-table-column>
        <el-table-column label="" width="150">
          <template #default="scope">
            <a target="_blank" :href="userStore.ossUrl(bucketName + '/' + scope.row.objectName)"
              v-if="scope.row.dir != true"><el-icon>
                <Download />
              </el-icon>下载</a>
            <el-button size="small" plain type="danger" icon="Delete" @click="handleDelete(scope.row)"
              v.auth="['system:oss:remove']" v-if="scope.row.dir != true" style="margin-left: 10px;">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />


    </div>
    <el-dialog title="文件上传" v-model="fileOpen" width="600px" append-to-body>
      <FileMultipart @success="uploadSuccess"></FileMultipart>
    </el-dialog>

  </div>
</template>
<style scoped>
a {
  color: royalblue;
}

a:hover {
  color: red;
}
</style>
<script setup name="Version">
import FileMultipart from "@/components/FileMultipart/index.vue"
import apiOss from "@/api/system/oss";
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance();
const userStore = useUserStore();


const { sys_common_status, sys_client_type, is } = proxy.useDict("sys_common_status", "sys_client_type", "is");
const bucketList = ref([]);
const fileList = ref([]);
const open = ref(false);
const fileOpen = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const selectedItemList = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const bucketName = ref("easy");


const navList = ref([]);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    dir: null
  }
});

const { queryParams, form, rules } = toRefs(data);

function getBucketListData() {
  // loading.value = true;
  apiOss.getBucketList().then(response => {
    bucketList.value = response.data;
  }).finally(() => {
    loading.value = false
  })
}

function getList() {
  if (bucketName.value != "") {
    // loading.value = true;
    apiOss.getBucketFileList(bucketName.value, queryParams.value).then(response => {
      fileList.value = response.data.rows;
      total.value = response.data.total;
    }).finally(() => {
      loading.value = false
    })
  }
}

function setDir(objectName) {
  queryParams.value.dir = objectName;
  const names = objectName.split("/");
  let arr = [];
  var oname = "";
  for (var i = 0; i < names.length - 1; i++) {
    oname += names[i] + "/";
    arr.push({ name: names[i], objectName: oname })

  }
  navList.value = arr;
  handleQuery();
}

// 取消按钮
function cancel() {
  open.value = false;
}


/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
function changeBucket(value) {
  bucketName.value = value;
  queryParams.value.dir = "";
  navList.value = [];
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  selectedItemList.value = selection.filter(item => item.dir === false).map(item => item.objectName);
  single.value = selection.filter(item => item.dir === false).length != 1;
  multiple.value = !selection.filter(item => item.dir === false).length;
}


/** 删除按钮操作 */
function handleDelete(row) {
  const _onameArr = [row.objectName] || selectedItemList.value;
  proxy.$modal.confirm('是否确认删除对象为"' + _onameArr + '"的数据项？').then(function () {
    return apiOss.delFile(bucketName.value, _onameArr);
  }).then(() => {
    getList();
    proxy.$modal.success("删除成功");
  }).catch(() => { });
}

function uploadSuccess(url) {
  proxy.$modal.success(`上传成功，文件地址：` + url);
  fileOpen.value = false;
  handleQuery();
}
function uploadFile() {
  fileOpen.value = true;
}
getBucketListData();
</script>
